<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import useStore from '../store'

const { channel } = useStore()
const { getChannelList, changeActive } = channel
getChannelList()

const { channelList, active } = storeToRefs(channel)
</script>

<template>
  <ul class="catagtory">
    <!-- #2 用循环时候的 id 和 active 进行比较 -->
    <!-- #5 点击 li 的时候调用 action -->
    <li
      v-for="item in channelList"
      :key="item.id"
      :class="{
        select: item.id === active,
      }"
      @click="changeActive(item.id)"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

<style scoed lang="less"></style>
